<template>
  <svg aria-hidden="true" class="svg-icon" :class="props.class">
    <use :xlink:href="symbolId" :fill="props.color" />
  </svg>
</template>

<script setup>
import {computed,defineProps } from 'vue'
const props = defineProps({
  prefix:{
    type:String,
    default:""
  },
  icon:{
    require:true,
    type:String
  },
  class:{
    type:[String,Array,Object],
    default:""
  },
  color:{
    type:String,
    default:"currentColor"
  }
})
let symbolId = computed(() => `#${props.prefix || 'icon'}-${props.icon}`)

</script>

<style>
.svg-icon{
  /* width: 24px;
  height: 24px;
  line-height: 24px; */
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
}
</style>